<template>
    <div>
        <el-card shadow="never" style="border:none;border:1px solid #ebeef5;" :body-style="{ padding: '0px' }">
            <img src="../assets/1.png" alt=""> 问卷系统--{{paper.title}}
        </el-card>
        <el-card v-for="(content,index) in paper.content" :key="'paper_'+content.id" :body-style="{ padding: '0px' }">
            <div slot="header">
                <span>{{index+1}}、{{content.outline_name}}</span>
            </div>
            <el-radio-group v-model="content.answer">
                <el-radio :label="item.id" v-for="item in paper.item" :key="'item_'+item.id">
                    {{item.item_name}}
                </el-radio>
            </el-radio-group>
        </el-card>
        <div>
            <!-- {{msg}} -->
            <!-- <qrcode :val="msg"  ></qrcode> -->
            <!-- <qrcode val="{a:1}"></qrcode> -->
            <vue-qr  :text="msg" :size="200"></vue-qr>
            <el-button type="primary" @click="save()">提交</el-button>
        </div>
    </div>
</template>

<script>
    import VueQr from 'vue-qr';
    export default {
        components: {
            'vue-qr': VueQr
        },
        props: ['id'],
        data() {
            return {
                paper: {}
            }
        },
        created() {
            this.getPaper()
        },
        computed: {
            msg() {
                let tmp = {
                    url: `${this.apiURL}/papers/${this.id}`,
                    id: this.id,
                }
                return JSON.stringify(tmp);
            }
        },
        methods: {
            save() {
                for (let i = 0; i < this.paper.content.length; i++) {
                    if (!this.paper.content[i].answer) {
                        this.$message.error(`请选择选项${i+1}!!!`);
                        return;
                    }
                }
                this.axios.post('/answers/add', {
                    item: JSON.stringify(this.paper.item),
                    content: JSON.stringify(this.paper.content),
                    paper_id: this.id
                }).then(() => {
                    this.$message.success('回答完毕!!!')
                }).catch(() => {
                    this.$message.error('你以作答!!!')
                })
            },
            async getPaper() {
                const ret = await this.axios.get(`/papers/${this.id}`);
                this.paper = ret.data.data;
            },
        }
    }
</script>

<style>

</style>
